<article class="module-deposit">
    <div class="recharge-coin">
        <div class="ui-account-box">
            <template v-if="hasAuth === false">
                <div class="ui-account-box-inner">
                    <div class="ui-title">
                        <span class="text">{{ $t('common.deposit') }}</span>
                    </div>
                    <div class="no-auth">
                        <span class="text">{{ $t('asset.deposit.toVerification1') }}</span>
                        <a href="#/certification">{{ $t('asset.deposit.toVerification2') }}</a>
                        <span class="text">{{ $t('asset.deposit.toVerification3') }}</span>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="ui-account-box-inner">
                    <div class="ui-title">
                        <span class="strong">{{coinType}}</span>
                        <span class="text">{{ $t('common.deposit') }}</span>
                    </div>
                    <div class="asset-info" >
                        <asset-drop :coin="coinType" :coin-list="coinList" :onSuccess="changeCoinType"></asset-drop>
                        <span class="asset-info-item price">{{$t('common.newPrice')}}：<b>${{usdPrice}}</b></span>
                        <span class="asset-info-item price"><b>¥{{cnyPrice}}</b></span>
                        <span class="asset-info-item">{{$t('common.available')}}：{{coinBalance}}</span>
                        <span class="asset-info-item fn-gray">{{$t('common.held')}}：{{coinLock}}</span>
                    </div>
                    <div class="box-content">
                        <div class="coin-address">
                            <!--<div ref="qrcode"></div>-->
                            <p class="address-name">{{ $t('asset.deposit.depositAddress') }}</p>
                            <input type="text "
                                   class="address-content"
                                   id="address"
                                   v-model="address"
                                   @click="copyAddress('#address')"
                                   readonly="readonly"
                                   autocomplete="off">
                            <!--<p class="address-content">{{address}}</p>-->
                            <span class="address-copy" @click="copyAddress('#address')"><i class="icon-copy"></i></span>
                            <div class="address-qrcode">
                                <popover placement="top" :title="addressTip" trigger="hover" width="170">
                                    <i class="icon-qrcode"></i>
                                    <div class="tip-box" slot="content">
                                        <qrcode :val="address" :size="140"></qrcode>
                                    </div>
                                </popover>
                            </div>

                            <div class="address-btn">
                                <a href="https://www.changwai.io/" v-if="coinType === 'USC'" class="ui-btn" target="_blank">{{$t('asset.deposit.outside')}}</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="ui-account-box-inner" v-if="coinType === 'USC'">
                    <usc></usc>
                </div>
                <div class="ui-account-box-inner">
                    <div class="ui-title-account">
                        <span class="strong">{{coinType }}</span>
                        <span class="text">{{ $t('asset.deposit.depositRecords') }}</span>
                        <span class="icon" @click="fetchList"><i class="icon-reload"></i></span>
                    </div>
                    <div class="box-content">
                        <div class="table-wrap">
                            <div class="m-table">
                                <table>
                                    <thead>
                                    <tr>
                                        <th width="25%">{{ $t('asset.deposit.time') }}</th>
                                        <th width="40%" class="fn-ta-right">{{ $t('asset.deposit.depositVolume') }}({{coinType }})</th>
                                        <th width="35%" class="fn-ta-right">{{ $t('asset.deposit.status') }}&emsp;</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="item in list" v-if="(isLoading === false)&&(list.length > 0)">
                                        <td>{{item.updateDate | timezone}}</td>
                                        <td class="fn-ta-right">{{filter.floorFix(item.amount,8)}}</td>
                                        <td class="fn-ta-right"
                                            :class="{'fn-green':item.status === 'SUCCESS',
                                     'fn-blue':item.status === 'WAITING',
                                     'fn-blue':item.status=='PROCESSING',
                                     'fn-dark-gray':item.status=='FAILURE',
                                     'fn-orange':item.status=='REFUSE'}" >
                                            {{item.statusText}}
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <loading v-if="isLoading"></loading>
                                <no-data v-if="isLoading === false && list && list.length === 0"></no-data>
                            </div>
                            <pager :page-no="condition.pageNo"
                                   :page-size="condition.pageSize"
                                   :on-page-change="changePage"
                                   :page-num="condition.pageNum"></pager>
                        </div>
                    </div>
                </div>
            </template>


        </div>
    </div>

</article>